<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>账号管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/self/self-common.css}" rel="stylesheet">

    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.css}" rel="stylesheet">

    <!-- Sweet Alert -->
    <link th:href="@{/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">

        <div class="col-sm-12 search-card">
            <div class="ibox">
                <div class="ibox-content">
                    <form class="form-inline">
                        <div class="form-group searchCX">
                            <input id="searchNumber" class="form-control" type="text" placeholder="请输入人员编号"
                                   clearable>
                        </div>

                        <div class="form-group searchCX">
                            <input id="searchName" class="form-control" type="text" placeholder="请输入人员名称"
                                   clearable>
                        </div>

                        <div class="form-group">
                            <select id="searchRole" class="selectpicker show-tick" data-live-search="true" title="选择角色"
                                    clearable>
                            </select>
                        </div>

                        <div class="form-group">
                            <button id="btnSearch" class="btn btn-purple" type="button" onclick="querySearch()">
                                <i class="fa fa-search"></i>
                                查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-12 table-card">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <i class="fa fa-bookmark"></i>
                        账号管理
                    </h5>
                </div>
                <div class="ibox-content">
                    <div id="toolbar">
                        <form class="form-inline btnOpacity">
                            <div class="btn-group">
                                <button class="btn btn-purple" type="button" id="btnAdd" onclick="addPage()">
                                    <i class="fa fa-plus-circle"></i>
                                    新增
                                </button>

                            </div>

                        </form>
                    </div>
                    <table id="dataTable" data-mobile-responsive="true"></table>
                </div>
            </div>
        </div>



    </div>


    <!--分配账号-->
    <div class="modal inmodal fade" id="myModalAdd">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增账号</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">

                    <div class="col-md-12">


                        <div class="form-group col-md-12">
                            <label class="col-sm-3 control-label">人员编号：</label>
                            <div class="col-sm-7">
                                <input id="personnelSnAdd" type="text" name="" class="form-control"
                                       placeholder="请输入人员编号">
                            </div>
                        </div>

                        <div class="form-group col-md-12">
                            <label class="col-sm-3 control-label">人员姓名：</label>
                            <div class="col-sm-7">
                                <input id="personnelNameAdd" type="text" name="" class="form-control"
                                       placeholder="请输入人员姓名">
                            </div>
                        </div>

                        <div class="form-group col-md-12">
                            <label class="col-sm-3 control-label">账号：</label>
                            <div class="col-sm-7">
                                <input id="accountAdd" type="text" name="" class="form-control"
                                       placeholder="请输入账号">
                            </div>
                        </div>


                        <div class="form-group col-md-12">
                            <label class="col-sm-3 control-label">绑定角色：</label>
                            <div class="col-sm-7">
                                <select id="selectRoleAdd" class="selectpicker show-tick xzcp" data-live-search="true"
                                        title="绑定角色">
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white btn-close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-purple btn-save" id="btnAddSave">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--提示框-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!--下拉选择框-->
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<!--日期-->
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<!--bootstrap导出-->
<script th:src="@{/js/plugins/bootstrap-table-export/bootstrap-table-export.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/tableExport.js}"></script>
<!--pdf导出 文本乱码问题-->
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/pdfmake.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/gbsn00lp_fonts.js}"></script>
<!--将表导出为PDF文件-->
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/jspdf.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/jspdf.plugin.autotable.js}"></script>

<script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>

<!-- Bootstrap table X-editable-->
<!--<script th:src="@{/js/plugins/bootstrap3-editable/js/bootstrap-editable.js}" type="text/javascript"></script>-->
<!--<script th:src="@{/js/plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.js}" type="text/javascript"></script>-->
<!--<script th:src="@{/js/plugins/suggest/bootstrap-suggest.min.js}" type="text/javascript"></script>-->


<script>
    var searchName = '';
    var searchNumber = '';
    var searchRole = '';
    var personnelId = '';
    var AddOrUpd = 0;

    function querySearch() {
        var name = $.trim($("#searchName").val());
        if (name) {
            searchName = name;
        }
        var number = $.trim($("#searchNumber").val());
        if (number) {
            searchNumber = number;
        }
        var role = $.trim($("#searchRole").val());
        if (role) {
            searchRole = role;
        }
        $('#dataTable').bootstrapTable('refresh');
        searchName = '';
        searchNumber = '';
        searchRole = '';
    }

    function initRole() {
        PostWebApi("getRoleList").done(function (data) {
            if (data.code == 0) {
                var info = data.data;
                if (info) {
                    var html = "<option value='-1'>全部</option>"
                    for (var i = 0; i < info.length; i++) {
                        var item = info[i];
                        html += "<option value='" + item.roleId + "'>" + item.roleName + "</option>";
                    }
                    $("#searchRole").html(html);
                    $("#searchRole").selectpicker('refresh');
                }
            }
        })
    }

    $(document).ready(function () {
        initRole();

        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                searchText: '',
                name: searchName,
                number: searchNumber,
                role: searchRole
            }
        }

        $('#dataTable')
            .bootstrapTable({
                url: baseUrl + "getPersonnelListPage",
                method: "post",
                queryParamsType: "",
                queryParams: queryParams,
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                striped: false, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                search: false, //是否显示搜索框功能
                pagination: true, //是否分页
                showRefresh: false, //是否显示刷新功能
                showToggle: false,
                showColumns: false,
                // clickToSelect: true, //是否启用点击选中行
                // uniqueId: "indentId", //每一行的唯一标识，一般为主键列
                // idField: "indentId",
                formatSearch: function () {
                    return "人员名称";
                },
                iconSize: 'outline',
                sidePagination: "server", //服务端请求
                showExport: false,//显示导出按钮
                buttonsAlign: "right",  //按钮位置
                exportTypes: ['excel'],  //导出文件类型
                pageList: [10, 20, 30, 'all'],
                exportDataType: "basic",//导出类型 'basic':当前页, 'all', 'selected'.
                exportOptions: {
                    ignoreColumn: [5],  //忽略某一列的索引
                    // fileName: '总台帐报表',  //文件名称设置
                    // worksheetName: 'sheet1',  //表格工作区名称
                    // tableName: '总台帐报表',
                },
                toolbar: '#toolbar', //工具按钮用哪个容器
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list',
                    export: 'glyphicon-export'
                }
                , responseHandler: function (res) {
                    var rows = [];
                    if (res.total !== 0) {
                        rows = res.list;
                    }
                    var result = {
                        rows: rows,
                        total: res.total
                    };
                    return result;
                },
                onEditableSave: function (field, row, oldValue, $ele) {
                    //更新数据到数据库

                },
                columns: [
                    /*          {
                              width: 30,
                              title: '序号',
                              formatter: function (value, row, index) {
                                  return index + 1;
                              }
                          }, */
                    {
                        field: 'personnelName',
                        title: '员工名称'
                    }, {
                        field: 'personnelNumber',
                        title: '员工工号'
                    }, {
                        field: 'account',
                        title: '登录账号',
                        formatter: function (value, row, index) {
                            if (row.roleId === 0) {
                                return "<span>-</span>";
                            } else {
                                var account = row.account;
                                return "<span>" + account + "</span>";
                            }
                        }
                    }, {
                        field: 'roleName',
                        title: '角色',
                        formatter: function (value, row, index) {
                            if (row.roleId === 0) {
                                return "<span>-</span>";
                            } else {
                                var roleName = row.roleName;
                                return "<span>" + roleName + "</span>";
                            }
                        }
                    }, {
                        field: 'isUsed',
                        title: '状态',
                        formatter: function (value, row, index) {
                            if (value == '1') {
                                return "启用";
                            } else {
                                return "停用";
                            }
                        }
                    }, {
                        field: 'operation',
                        title: '操作',
                        align: 'center',
                        width: '270',
                        formatter: function (value, row, index) {
                            var resUpdate = '';
                            var resEnable = '';
                            var resUpdatePassword = '';
                            var resDelete = '';
                            var resUnable = '';
                            resUpdate = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_edit' onclick='updatePage(\"" + row.personnelId + "\")' title='编辑'></button>";
                            resUpdatePassword = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_resetPassword'  onclick='resetPsd(\"" + row.personnelId + "\")' title='密码重置'></button>";
                            resDelete = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_delete'  onclick='deleteData(\"" + row.personnelId + "\" )' title='删除账号'></button>";
                            resEnable = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_startUsing' onclick='enableData(\"" + row.personnelId + "\")' title='启用'></button>";
                            resUnable = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_stop' onclick='unEnableData(\"" + row.personnelId + "\")' title='停用'></button>";
                            if (row.isUsed == 1) {
                                return resUpdate + resUnable + resUpdatePassword + resDelete
                            } else {
                                return resUpdate + resEnable + resUpdatePassword + resDelete;
                                // var openUse = "<button type='button' class = 'btn btn-warning btngroup btn-xs TableEditor' onclick='openUse(\"" + row.innerProcessId + "\")'>启用</button>";
                                // var closeUse = "<button type='button' class = 'btn btn-success btngroup btn-xs TableEditor' onclick='closeUse(\"" + row.innerProcessId + "\")'>禁用</button>";
                            }
                        }
                    }
                ],
                onClickRow: function (row, $element) {
                    $('.info').removeClass('info');
                    $($element).addClass('info');
                    personnelId = row.personnelId;

                }
            });


        //初始化角色选择框
        PostWebApi("getRoleList", {}).done(function (data) {
            if (data.code === 0) {
                var $selectRoleAdd = $("#selectRoleAdd");
                var list = data.data;
                $selectRoleAdd.empty();
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    $selectRoleAdd.append('<option  value="' + item.roleId + '" ><span>' + item.roleName + '</span>');
                }
                $selectRoleAdd.selectpicker('refresh');
            }
        });

        //初始化角色选择框
        PostWebApi("getAllTUserList", {}).done(function (data) {
            if (data.code === 0) {
                var info = data.data;
                if (info) {
                    var html = '';
                    for (var i = 0; i < info.length; i++) {
                        var item = info[i];
                        html += '<option value="' + item.id + '">' + item.fname + '</option>';
                    }
                    $("#selectUserAdd").html(html);
                    $("#selectUserAdd").selectpicker('refresh');
                }
            }
        });

        //     $("#myModalAdd").on("hidden.bs.modal", function () {
        //
        //         $("#accountAdd").val("");
        //         $("#passwordAdd").val("");
        //         $("#confirmPasswordAdd").val("");
        //
        //         $("#selectRoleAdd").val("");
        //         $("#selectRoleAdd").selectpicker('refresh');
        //     });
        // });
        $("#myModalAdd").on("hidden.bs.modal", function () {

            $("#personnelSnAdd").val("");
            $("#personnelNameAdd").val("");
            $("#accountAdd").val("");

            $("#selectRoleAdd").val("");
            $("#selectRoleAdd").selectpicker('refresh');
        });
    });

    /* 停用 */
    function unEnableData() {
        // if (personnelId == "") {
        //     layer.msg("请选择一条记录进行停用");
        //     return;
        // }
        swal({
            title: "您确定要停用该帐号吗",
            //text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "rgb(85 221 218)",
            confirmButtonText: "确定",
            closeOnConfirm: false
        }, function () {
            swal.close();
            PostWebApi("inactivePersonnel", {
                personnelId: personnelId
            }).done(function (data) {
                if (data.code == '0') {
                    layer.msg(data.msg);
                    $('#dataTable').bootstrapTable('refresh');
                    personnelId = "";
                } else {
                    layer.msg(data.msg);
                }
            })
        })
    }

    /* 启用 */
    function enableData() {
        // if (personnelId == "") {
        //     layer.msg("请选择一条记录进行启用");
        //     return;
        // }
        swal({
            title: "您确定要启用该帐号吗",
            //text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "rgb(85 221 218)",
            confirmButtonText: "确定",
            closeOnConfirm: false
        }, function () {
            swal.close();
            PostWebApi("invokePersonnel", {
                personnelId: personnelId
            }).done(function (data) {
                if (data.code == '0') {
                    layer.msg(data.msg);
                    $('#dataTable').bootstrapTable('refresh');
                    personnelId = "";
                } else {
                    layer.msg(data.msg);
                }
            })
        })
    }

    /* 新增账号 */
    function addPage() {
        AddOrUpd = 0;
        $('#myModalAdd .modal-header .modal-title').empty().text("新增账号");
        $('#myModalAdd').modal();
    }

    /* 修改账号 */
    function updatePage(update_id) {
        // if (personnelId == "") {
        //     layer.msg("请选择一条记录进行修改");
        //     return;
        // }
        PostWebApi("getPersonnelById", {
            personnelId: update_id,
        }).done(function (data) {
            if (data.code == 0) {

                $("#accountAdd").val(data.data.account)
                $("#selectRoleAdd").val(data.data.roleId);
                $("#selectRoleAdd").selectpicker('refresh');
                $("#personnelSnAdd").val(data.data.personnelNumber)
                $("#personnelNameAdd").val(data.data.personnelName)
                AddOrUpd = 1;
                $('#myModalAdd .modal-header .modal-title').empty().text("修改账号");
                $('#myModalAdd').modal();
            } else {
                layer.msg(data.msg);
            }
        });
        personnelId = update_id
    }

    //保存
    $("#btnAddSave").click(function () {
        // var userId = $("#selectUserAdd").val()
        var account = $("#accountAdd").val();
        var personnelSn = $("#personnelSnAdd").val();
        var personnelName = $("#personnelNameAdd").val();
        /*        var password = $("#passwordAdd").val();
                var confirmPassword = $("#confirmPasswordAdd").val();*/
        var roleId = $("#selectRoleAdd").val();

        if (personnelSn === '') {
            layer.msg('请输入员工工号')
            return
        }
        if (personnelName === '') {
            layer.msg('请输入员工姓名')
            return
        }

        if (account === "") {
            layer.msg('请输入账号');
            return false;
        }
        /*        if (password === "") {
                    layer.msg('请输入密码');
                    return false;
                }
                if (confirmPassword === "") {
                    layer.msg('请输入确认账号');
                    return false;
                }
                if (password !== confirmPassword) {
                    layer.msg('两次输入的密码不相同');
                    return false;
                }*/
        if (roleId === "") {
            layer.msg('请绑定角色');
            return false;
        }

        if (AddOrUpd == 0) {
            PostWebApi("addPersonAccount", {
                personnelName: personnelName,
                personnelNumber: personnelSn,
                account: account,
                roleId: roleId
            }).done(function (data) {
                if (data.code === 0) {
                    layer.msg('添加成功');
                    $("#myModalAdd").modal('hide');
                    $('#dataTable').bootstrapTable('refresh');
                    personnelId = "";
                } else {
                    layer.msg(data.msg);
                }
            });
        } else {
            PostWebApi("updPersonAccount", {
                personnelNumber: personnelSn,
                personnelName: personnelName,
                account: account,
                roleId: roleId,
                personnelId: personnelId
            }).done(function (data) {
                if (data.code === 0) {
                    layer.msg('修改成功');
                    $("#myModalAdd").modal('hide');
                    $('#dataTable').bootstrapTable('refresh');
                    personnelId = "";
                } else {
                    layer.msg(data.msg);
                }
            });
        }

    });


    //删除帐号
    function deleteData() {
        // if (personnelId == "") {
        //     layer.msg("请选择一条记录进行删除");
        //     return;
        // }
        swal({
            title: "确定删除该帐号吗？",
            //text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "rgb(85 221 218)",
            confirmButtonText: "确定",
            closeOnConfirm: false
        }, function () {
            PostWebApi("deleteAccount", {
                personnelId: personnelId
            }).done(function (data) {
                if (data.code === 0) {
                    swal.close()
                    layer.msg('删除成功');
                    $('#dataTable').bootstrapTable('refresh');
                    personnelId = "";
                } else {
                    layer.msg(data.msg);
                }
            });
        })
    }

    //密码重置
    function resetPsd() {
        // if (personnelId == "") {
        //     layer.msg("请选择一条记录进行密码重置");
        //     return;
        // }
        swal({
            title: "确定重置该帐号密码吗？",
            //text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "rgb(85 221 218)",
            confirmButtonText: "确定",
            closeOnConfirm: false
        }, function () {
            PostWebApi("resetPassword", {
                personnelId: personnelId

            }).done(function (data) {
                if (data.code === 0) {
                    swal.close()
                    layer.msg('密码重置成功');
                    $('#dataTable').bootstrapTable('refresh');
                    personnelId = "";
                } else {
                    layer.msg(data.msg);
                }
            });
        })
    }

</script>

</body>

</html>
